import React, { useState, useEffect } from "react";
import { useParams } from "react-router-dom";

const Room = () => {
  const [votesToSkip, setVotesToSkip] = useState(2);
  const [guestCanPause, setGuestCanPause] = useState(false);
  const [isHost, setIsHost] = useState(false);
  const { roomCode } = useParams();

  useEffect(() => {
    // Fetch room details when the component mounts or roomCode changes
    const getRoomDetails = async () => {
      try {
        const response = await fetch("/api/get-room?code=" + roomCode);
        const data = await response.json();
        // console.log(data)
        // console.log(data.guest_can_pause)
        // console.log(data.is_host)
        setVotesToSkip(data.votes_to_skip);
        setGuestCanPause(data.guest_can_pause);
        setIsHost(data.is_host);
      } catch (error) {
        console.error("Failed to fetch room details:", error);
      }
    };

    getRoomDetails();
  }, [roomCode]); // Dependency array ensures the effect runs when roomCode changes

  return (
    <div>
      <h3>{roomCode}</h3>
      <p>票数: {votesToSkip}</p>
      <p>访客可以暂停: {guestCanPause.toString()}</p>
      <p>主持人: {isHost.toString()}</p>
    </div>
  );
};

export default Room;
